<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=width-device,initial-scale=1.0,user-scalable=no" />
		<title>增加职业</title>		
		<link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" href="js/datetimepicker/jquery.datetimepicker.css" />
	</head>
	<body>
		<div class="container">			
			
			<h2 class="page-header">增加新职业</h2>
			
			<form id="form1" class="form-horizontal">				
				<div class="form-group">
					<label for="" class="col-sm-2">职业名称</label>
					<div class="col-sm-8">
						<input v-model="job.jobName" type="text" id="jobName" name="jobName" placeholder="请输入职业名称" class="form-control"/>
					</div>
				</div>	
				<div class="form-group">
					<label for="" class="col-sm-2">职业最低工资</label>
					<div class="col-sm-8">
						<input v-model="job.jobMinSal" type="text" id="jobMinSal" name="jobMinSal" placeholder="请输入职业最低工资" class="form-control"/>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">职业最高工资</label>
					<div class="col-sm-8">
						<input v-model="job.jobMaxSal" type="text" id="jobMaxSal" name="jobMaxSal" placeholder="请输入职业最高工资" class="form-control"/>
					</div>
				</div>
				
				
				<div class="form-group">
					<label for="" class="col-sm-2">所属专业</label>
					<div class="col-sm-8">
						<select v-model="job.majorsId" name="majorsId" id="majorsId" class="form-control">
							<option value="">请选择部门</option>
							<option v-for="majors in majorsData" :value="majors.majorsId">{{majors.majorsName}}</option>
						</select>
					</div>
				</div>
				
				<div class="form-group">
					<label for="" class="col-sm-2">职业简介</label>
					<div class="col-sm-8">
						<textarea v-model="job.jobIntro" id="jobIntro" name="jobIntro" class="form-control"></textarea>
					</div>
				</div>				
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-8">
						<input @click="add()" type="button" value="增加职业" class="btn btn-success" id="addBtn"/>
						<input type="button" value="取消" class="btn btn-warning" onclick="history.back();" />
					</div>					
				</div>
			</form>	
		</div>		
		
		<script type="text/javascript" src="js/vue2.5.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/global.js" ></script>
		<script type="text/javascript" src="js/bootstrap/js/bootstrap.js" ></script>
		<script type="text/javascript" src="js/layer/layer.js" ></script>
		<script type="text/javascript" src="js/datetimepicker/jquery.datetimepicker.js" ></script>
		<script>
			
			//vue实例
			var vue = new Vue({
				el:'.container',
				data:{
					majorsData:[],
					job:{
						majorsId:''
					}
				},
				methods:{
					//获得专业列表数据
					queryMajors:function(){
						axios.get(baseUrl + '/majors/query')
							.then(function(response){
								this.majorsData = response.data;
							}.bind(this))
							.catch(function(error){
								layer.msg('获得专业列表失败');
							});
						
					},
					
					//增加员工
					add:function(){
						
						if (!checkForm())
							return;
							
						axios.post(baseUrl + '/job/add',$.param(this.job))
							.then(function(response){
								
								layer.msg('增加职业成功');								
								
							}.bind(this))
							.catch(function(error){
								layer.msg('增加职业失败');
							});
						
					}
				},
				mounted:function(){
					this.queryMajors();
				}
						
			});	
			
			
			//表单验证函数
			function checkForm() {
				
				//员工姓名
				var jobName = $('#jobName');
				
				if (jobName.val() == '' || jobName.val().length > 20) {
					layer.msg('职业名称不能为空，且最多20字符');
					jobName.focus();
					return false;
				}
				
				//部门
				var majorsId = $('#majorsId');
				
				if (majorsId.val() == '') {
					layer.msg('请选择一个专业');
					majorsId.focus();
					return false;
				}
				
				//员工简介（最多600字）
								
								
				return true;
			}
		</script>		
	</body>
</html>